<template>
 <view>
   <view class="title-box" v-if="title">
     <view class="block"></view>
     <view class="text">{{ title }}</view>
   </view>
   <view class="table-container">
     <view v-for="(line,index) in data" :key="index" class="line">
       <view class="text" v-for="(item,j) in line" :key="j">
         <view class="box" :style="{width:item.width+'rpx',fontWeight:item.fontWeight,color:item.color,textAlign:item.align,paddingLeft:item.align==='left'?'20rpx':0}">{{ item.value }}</view>
       </view>
     </view>
   </view>
 </view>
</template>

<script>
export default {
  name: 'cc-table',
  props: {
    title:{
      type:String,
      default: ""
    },
    data:{
      type:Array,
      default:[
          [{value:"客户类型",width:248,align:"left"},{value:"次数",width:198},{value:"次数",width:180}],
          [{value:"银行汇总",width:248,align:"left"},{value:"1",width:198},{value:"0",width:180}],
          [{value:"传统银行",width:248,align:"left"},{value:"2",width:198},{value:"2",width:180}],
      ]
    }
  }
}
</script>

<style scoped lang="scss">
.title-box{
  display: flex;
  align-items: center;
  margin-bottom: 18rpx;
  .block{
    width: 4rpx;
    height: 24rpx;
    background-color: #3170FF;
    margin-right: 8rpx;
  }
  .text{
    color: #001850;

  }
}
.table-container{
  .line{
    display: flex;
    //flex-shrink: 0;
    //height: 56rpx;
    min-height: 56rpx;
    //line-height: 56rpx;
    align-items: center;
    padding: 14rpx 0;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(148, 148, 156, 0.40);
  }
  .line:last-of-type{
    border-bottom: none;
  }
  .text{
    color: #001850;
    flex-shrink: 0;
    text-align: center;
    font-size: 20rpx;
    //padding: 0 10rpx;
    //box-sizing: border-box;
  }
  //.text:first-of-type{
  //  font-weight: bold;
  //}
  .line:first-of-type{
    font-weight: bold;
  }
  .line:nth-child(odd){
    color: #001850;
    background-color: rgba(136, 173, 255, 0.1);
    //background-color:red;
  }
  .line:nth-child(even){
    background-color: rgba(136, 173, 255, 0.05);
    //background-color:blue;
  }
}

</style>
